<!--差弹窗 -->

<template>
    <view class="buyerBidList">
        <!--暂无数据显示-->
        <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
        <view class="bidList_entire" wx:if="{{!is_empty}}"  wx:for="{{List}}" wx:key="index,item">
            <view class="bidList_zhuangtai" wx:if="{{item.meOffer == item.maxBuyerOfferAmount && item.maxBuyerOfferId}}">
                <text class="btn" @tap="sellPrice" data-id="{{item.offerId}}" data-maxid="{{item.maxBuyerOfferId}}">出售</text>
            </view>
            <view class="bidList_list">
                <view class="bidList_image">
                    <image src='{{item.topicImage}}'></image>
                </view>
                <view class="bidList_name">
                    <view>{{item.goodsName}}</view>
                    <view>{{item.goodsSize}}</view>
                </view>
            </view>
            <view class="bidList_flex">
                <view class="bidList_flex1 backf5f5f9">
                    <text>卖家最低售价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex2 backf5f5f9">
                    <view class="bidList_pire">￥
                        <text>{{item.minSellerOfferAmount}}</text>
                    </view>
                </view>
                <view class="bidList_flex3 backe6e6e6">
                    <text>买家最高出价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex4 backe6e6e6">
                    <view class="bidList_pire">￥
                        <text>{{item.maxBuyerOfferAmount}}</text>
                    </view>
                </view>
            </view>
            <view class="bidList_flex">
                <view class="bidList_flex1 back_fff">
                    <text>我的出价</text>
                    <view class="border-right" style="background: #e6e6e6"></view>
                </view>
                <view class="bidList_flex2 back_fff">
                    <view class="bidList_pire inputPri color_org">
                        <view class="diVain" style="width: 20rpx">
                            ￥
                        </view>
                        <input class="diVain" style="width: 200rpx;text-align: left;" type="text" value="{{item.newMeOffer||item.meOffer}}" bindinput="getPrice" data-length="{{index}}">
                    </view>
                </view>
                <view class="bidList_flex3 back_fff">
                    <view class="modification">
                        <view @tap="updatePrice" data-id="{{item.offerId}}" data-price="{{item.newMeOffer||item.meOffer}}">
                            <i class="iconfont icon-bianji"></i>
                        </view>
                        <view @tap="updatePrice" data-id="{{item.offerId}}" data-price="{{item.newMeOffer||item.meOffer}}">修改</view>
                    </view>
                </view>
                <view class="bidList_flex4 back_fff">
                    <view class="modification">
                        <view @tap="deletePrice" data-id="{{item.offerId}}">
                            <i class="iconfont icon-chexiao2-copy"></i>
                        </view>
                        <view @tap="deletePrice" data-id="{{item.offerId}}">撤销</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import tip from '@/utils/tip'
    import {
        USER_INFO,USER_SPECICAL_INFO
    } from '@/utils/constant';
    import Placeholder from "../../components/common/placeholder"
    export default class record extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '卖家出价列表',    // 头部标题
        }

        components = {
            placeholder: Placeholder
        }

        data = {
            List:[],
            form:{
                page:1,
                limit:10
            },
            page_total:'',
            is_empty:false
        };

        methods = { // 方法
            updatePrice(e){
                const t = this;
                let p = e.currentTarget.dataset.price,
                    id = e.currentTarget.dataset.id,
                    reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if (!p) {
                    tip.alert('出价不能为空')
                }else if(!reg.test(p)){
                    tip.alert('我的出价必须为数字金额');
                } else {
                    wx.showModal({
                        content: '确认修改？',
                        confirmText:'修改',
                        success(r){
                            if(r.confirm){
                                t.UpdateOfferFun(p,id);
                            }
                        }
                    });
                }
            },
            getPrice(e){
                const t = this;
                let l = e.currentTarget.dataset.length;
                t.List[l]['newMeOffer'] = e.detail.value;
            },
            deletePrice(e){
                const t = this;
                let id = e.currentTarget.dataset.id;
                wx.showModal({
                    content: '您确认撤销吗？',
                    success(r){
                        if(r.confirm){
                            t.goodsUndoFun(id);
                        }
                    }
                });
            },
            sellPrice(e){
                const t = this;
                let id = e.currentTarget.dataset.id,
                    maxid = e.currentTarget.dataset.maxid;
                wx.showModal({
                    content: '您确认出售吗？',
                    success(r){
                        if(r.confirm){
                            t.orderSaleFun(id,maxid);
                        }
                    }
                });
            }
        };
        onLoad() {
            const t = this;
            let userId = wx.getStorageSync('userId');
            t.form['params["userId"]'] = userId;
            t.getChildCate();
        }
        events = {};
        async getChildCate(type) {
            const t = this;
            const a = await api.goodsListMeSale({
                query:t.form
            });
            if (a.data.code == 0) {
                t.page_total = Math.ceil(a.data.data.total/t.form['limit']);
                t.form['page'] = a.data.data.page;
                if(type){
                    t.List = [...t.List, ...a.data.data.rows];
                }else {
                    t.List = a.data.data.rows;
                }
                if (!t.List || t.List[0] == null || t.List.length == 0) {
                    t.is_empty = true;
                }else {
                    t.is_empty = false;
                }
                t.$apply();
            } else {
                tip.error(a.data.msg);
            }
        }
        /**
         * 更新出价价格
         * @returns {Promise.<void>}
         */
        async UpdateOfferFun(price,id) {
            const t = this
            const a = await api.goodsUpdateOfferAmount({
                query: {
                    amount:price,
                    offerId:id,
                    userId:t.form['params["userId"]']
                },
                method: 'PUT'
            })
            if (a.data.code == 0) {
                t.getChildCate();
            } else {
                tip.error(a.data.msg);
            }
        }
        /**
         * 出价=买家最高出价时
         * @returns {Promise.<void>}
         */
        async orderSaleFun(id,maxid) {
            const t = this
            const a = await api.orderSale({
                query: {
                    sellerOfferId:id,
                    buyerOfferId:maxid,
                    userId:t.form['params["userId"]']
                }
            })
            if (a.data.code == 0) {
                t.getChildCate();
            } else {
                tip.error(a.data.msg);
            }
        }
        /**
         * 撤销出价
         * @returns {Promise.<void>}
         */
        async goodsUndoFun(id) {
            const t = this;
            const a = await api.goodsUndo({
                query: {},
                method: 'DELETE'
            },"?offerId="+id+"&userId="+t.form['params["userId"]']);
            if (a.data.code == 0) {
                t.getChildCate();
            } else {
                tip.error(a.data.msg);
            }
        }
        //加载更多
        onReachBottom() {
            let that = this;
            that.showLoading = true;
            if (that.page_total > that.form['page']) {
                that.form['page']++;
                that.getChildCate(1);
            } else {
                that.showLoading = false;
            }
        }
    }

</script>
<style lang="less">
    .buyerBidList {
        >view:first-child {
            margin-top: 0 !important;
        }
        >view {
            margin-top: 20rpx;
        }
        .wuPrice{
            position:absolute;
            right:10rpx;
            top:30rpx;
            font-size:22rpx;
            color: #ff4236;
        }
        .bidList_entire {
            .bidList_images{
                text-align: center;
            }
            position: relative;
            background: #fff;
            .backf5f5f9 {
                background: #FFA622;
                color: #fff;
            }
            .back_fff {
                background: #fff;
            }
            .backe6e6e6 {
                background: #70B957;
                color: #fff;
            }
            .inputPri{
                width: 240rpx;
            }
            .diVain{
                font-size: 30rpx;
                height: auto;
                color: #ffb025;
                display: inline-block;
                vertical-align: middle;
                padding: 0 5rpx;
            }
            .bidList_zhuangtai {
                text-align: right;
                padding: 20rpx 40rpx;
                margin-left: 20rpx;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                .btn {
                    display: inline-block;
                    padding: 4px 8px;
                    color: #fff;
                    font-size: 12px;
                    line-height: normal;
                    border-radius: 8rpx;
                    background-color: #ffb025;
                }
            }
            .bidList_list {
                display: flex;
                justify-content: flex-start;
                .bidList_image {
                    width: 240rpx;
                    height: 240rpx;
                    position: relative;
                    image {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 200rpx;
                        height: 200rpx;
                        border: 1px solid #ddd;
                    }
                }
                .bidList_name {
                    padding: 30rpx 0;
                }
            }
            .bidList_flex {
                display: flex;
                justify-content: flex-start;
                .bidList_flex1 {
                    width: 30%;
                    overflow: hidden;
                    padding: 20rpx 0;
                    position: relative;
                    text {
                        padding-left: 20rpx;
                    }
                    .border-right {
                        position: absolute;
                        top: 4rpx;
                        right: 0;
                        width: 2rpx;
                        height: 80rpx;
                    }
                }
                .bidList_flex2 {
                    width: 20%;
                    text-align: right;
                    padding: 20rpx 0;
                    .bidList_pire {
                        font-size: 22rpx;
                        color: #fff;
                        text {
                            padding-right: 20rpx;
                            font-size: 30rpx;
                        }
                    }
                }
                .bidList_flex3 {
                    width: 30%;
                    position: relative;
                    padding: 20rpx 0;
                    .modification {
                        text-align: right;
                        view:first-child {
                            width: 50rpx;
                            height: 50rpx;
                        }
                        view {
                            display: inline-block;
                            i {
                                vertical-align: middle;
                                font-size: 36rpx;
                                padding-right: 10rpx;
                            }
                            text {
                                padding-left: 0;
                                vertical-align: middle;
                                display: inline-block;
                            }
                        }
                    }
                    text {
                        padding-left: 20rpx;
                    }
                    .border-right {
                        position: absolute;
                        top: 4rpx;
                        right: 0;
                        width: 2rpx;
                        height: 80rpx;
                    }
                }
                .bidList_flex4 {
                    width: 20%;
                    text-align: center;
                    padding: 20rpx 0;
                    .bidList_pire {
                        font-size: 22rpx;
                        color: #fff;
                        text {
                            font-size: 30rpx;
                        }
                    }
                    .modification {
                        view:first-child {
                            width: 50rpx;
                            height: 50rpx;
                        }
                        view {
                            display: inline-block;
                            i {
                                vertical-align: middle;
                                font-size: 32rpx;
                                padding-right: 10rpx;
                            }
                            text {
                                padding-left: 0;
                                vertical-align: middle;
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
